<template>
    <div class="comment">
        <div class="commentOne">
<!--            <textarea type="text" cols="1" placeholder="发表评论"></textarea>-->
            <el-input
                type="textarea"
                :autosize="{ minRows: 1}"
                placeholder="发表评论"
                v-model="textarea1">
            </el-input>
            <p :class="{'active':canSend}">发送</p>
        </div>
        <div class="commentTwo" v-show="twoShow" :class="{'active':twoShow}">
            <div class="twoHead">
                <span>对第3行进行评论</span>
                <i class="el-icon-close" @click="CloseCommonTwo()"></i>
            </div>
            <div class="twoBody">
                <ul>
                    <li v-for="(item,index) in comlum" :key="index">
                        <img :src='item.img' alt="">
                        <div class="commentRight">
                            <div class="rightTop">
                                <span class="name">{{item.name}}</span>
                                <span class="time" v-if="item.time">{{item.time}}</span>
                                <span class="delete" v-if="!item.time">删除</span>
                            </div>
                            <div class="rightInstall" v-if="item.creator"><p>回复 <span>{{item.creator}}</span>{{item.creatorTitle}}</p></div>
                            <p class="des">{{item.des}}</p>
                            <span class="TA">回复TA</span>
                        </div>
                    </li>
                </ul>
                <div class="commentOne fixedBottom">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 1}"
                        placeholder="回复 公公公"
                        v-model="textarea2">
                    </el-input>
                    <p :class="{'active':canSend1}">发送</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'comment',
        data() {
            return {
                textarea1: '',
                textarea2: '',
                canSend:false,
                canSend1:false,
                twoShow:true,
                comlum:[{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",

                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    // time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creator:'邬瑗',
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },{
                    name:"魏青林",
                    time:'11:26 09:24',
                    des:"称月界五作目料验组法把电标个办写石至。",
                    creatorTitle:'称月界五作目料验组法把电标个办写石至。',
                },]
            };
        },

        watch: {
            textarea1(val) {
               val.length>10?this.canSend=true:this.canSend=false
            },
            textarea2(val) {
                val.length>10?this.canSend1=true:this.canSend1=false
            }
        },
        mounted() {
            console.log(this.PdialogVisible)
        },
        methods: {
            CloseCommonTwo(){
                this.twoShow=false;
            },
            getFocus(){
                this.filterListShow=!this.filterListShow;
            }
        }
    };
</script>
<style lang="less" scoped>
    @import url('./css/comment');
</style>
<style lang="less">
    .comment{
        .el-textarea {
            width: 170px;
            margin-right: 8px;
            .el-textarea__inner{
                border: none;
            }
        }
        .commentOne {

        }
        }
</style>
